<template>
  <svg class="svg-icon" aria-hidden="true" :style="myStyle">
    <use :xlink:href="iconName" rel="external nofollow"></use>
  </svg>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    name: {
      type: String,
      default: "",
    },
    // svgStyle: {
    //   type: String,
    //   default: "",
    // },
    myStyle: {
      type: Object,
      defalt: {},
    },
  },
  setup(props) {
    const iconName = computed(() => {
      // 我们配置的loader 选项中,定义了 icon-[name]
      // return props.name ? `#icon-${props.name}` : "#icon";
      return props.name ? `#${props.name}` : "#empty";
    });
    // const svgClass = computed(() => {
    //   return props.svgStyle ? "svg-icon " + props.svgStyle : "svg-icon";
    // });
    return {
      iconName,
      // svgClass,
    };
  },
});
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
  fill: currentColor;
  line-height: 1em;
  font-size: 20px;
}
</style>